<template>
  <div class="layout-pd">
    <div class="container">
      <div class="search-btns">
        <div class="btns">
          <el-button v-if="auth(state.isHasAdd)" size="default" color="#18bc9c" @click="addFn">+ 添加</el-button>
        </div>
        <div class="search"></div>
      </div>
      <div class="tables">
        <YxTable :header-cell-style="{ background: '#f5f7fa' }" border :selection="false" :isSerialNum="false"
          :data="state.tableData" :columnData="state.columnData" :isPage="false" :showOperator="true">
          <template v-slot:status="{ row }">
            <span>{{ statusObj[row.status] }}</span>
          </template>
          <template v-slot:value_added_services="{ row }">
            <span>{{ getNamesByIds(servicesArr, row.value_added_services) }}</span>
          </template>
          <template v-slot:delivery_time="{ row }">
            <span>{{ getNamesByIds(deliArr, row.delivery_time) }}</span>
          </template>
          <template v-slot:operate="{ row }">
            <el-button v-if="auth(state.isHasEdit)" @click="operateFn('edit', row)" type="primary" text
              size="small">编辑</el-button>
            <el-popconfirm title="确定删除吗？" @confirm.stop="operateFn('del', row)">
              <template #reference>
                <el-button v-if="auth(state.isHasDel)" type="primary" text size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </YxTable>
      </div>
    </div>
    <AddMaterial ref="addMaterialRef" @updateList="getData"></AddMaterial>
  </div>
</template>

<script setup name="materialManageIndex">
import { materialList, addedservicesIndex, deliveryTime, materialDel } from '/@/api/startfab/index';
import { materialColumn } from '/@/commmon/column';
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { auth } from '/@/utils/authFunction';
const YxTable = defineAsyncComponent(() => import('/@/components/expandYxTable/index.vue'));
const AddMaterial = defineAsyncComponent(() => import('/@/views/startfab/materialManage/addMaterial.vue'));
const addMaterialRef = ref()
const state = reactive({
  isHasAdd: 'admin:admin:materAdd',
  isHasEdit: 'admin:admin:materEdit',
  isHasDel: 'admin:admin:materDel',
  formData: {
    keyword: ''
  },
  columnData: materialColumn,
  tableData: [],
})
const statusObj = ref({
  1: '启用',
  2: '关闭'
})
const addFn = () => {
  addMaterialRef.value.openDialog('add')
}
const servicesArr = ref([])
const serviceFn = async () => {
  const resData = await addedservicesIndex()
  if (resData.code === 10000) {
    servicesArr.value = resData.data.list
  }
}
const deliArr = ref([])
const deliveryTimeFn = async () => {
  const resData = await deliveryTime()
  if (resData.code === 10000) {
    deliArr.value = resData.data.list
  }
}
const getNamesByIds = (array, idString) => {
  if (!array.length) return idString;
  if (!idString) { return '' }
  const ids = idString.split(',').map(id => Number(id.trim()));
  const names = array.filter(item => ids.includes(item.id)).map(item => item.name)
  return names.join(',')
}
const getData = () => {
  const params = {
    page: 1,
    pageNum: 100000,
    search: state.formData.keyword,
  }
  materialList(params).then((res) => {
    if (res.code === 10000) {
      state.tableData = res.data
    }
  })
}
const operateFn = async (type, row) => {
  if (type == 'del') {
    const resData = await materialDel({ id: row.id })
    if (resData.code == 10000) {
      searchFn()
    }
  } else {
    addMaterialRef.value.openDialog('edit', row)
  }
}
const searchFn = async () => {
  getData()
}
onMounted(async () => {
  await deliveryTimeFn()
  await serviceFn()
  await searchFn()
})
</script>

<style scoped lang="scss">
.container {
  background: #FFFFFF;
  padding: 15px;

  ::v-deep .search-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-input-group__append {
      padding: 0px 15px;

      .el-icon {
        color: #333333;
        margin-right: 0px;
      }
    }

    .el-button {
      color: #FFFFFF;
    }
  }

  .tables {
    margin-top: 10px;
  }
}
</style>
